<template>
  <div id="app">
    <div class="">
      name:<input type="text" v-model="value.name" /> id:<input
        type="text"
        v-model="value.id"
      />
      <button @click="doAdd">添加</button>
    </div>

    <div class="">
      <div class="">未完成</div>
      <div>{{ num }}</div>
      <div class="" v-for="item of arr" :key="item.id" v-show="!item.state">
        <input
          type="checkbox"
          name=""
          id=""
          @click="onChange(item.name)"
          :checked="item.state"
        />{{ item.name }}
        <button @click="doDel(item.name)">删除</button>
      </div>
    </div>

    <div class="">
      <div class="">完成</div>
      <div>{{ arr.length - num }}</div>
      <div class="" v-for="item of arr" :key="item.id" v-show="item.state">
        <input
          type="checkbox"
          name=""
          id=""
          @click="onChange(item.name)"
          :checked="item.state"
        />{{ item.name }}
        <button @click="doDel(item.name)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      value: {
        name: "",
        state: false,
        id: "",
      },
      arr: [
        { name: "html", state: false, id: 1001 },
        { name: "css", state: true, id: 1002 },
        { name: "js", state: false, id: 1003 },
      ],
      num: 0,
    };
  },
  mounted() {
    this.num = this.deal();
  },
  methods: {
    doAdd() {
      var value = this.value;
      var obj = Object.assign({}, value);
      this.arr.unshift(obj);
      this.num = this.deal();
    },
    doDel(name) {
      this.arr.forEach((res, index) => {
        if (res.name == name) {
          this.arr.splice(index, 1);
        }
      });
      this.num = this.deal();
    },
    onChange(name) {
      var arr = this.arr
      arr.forEach((res) => {
        if (res.name == name) {
          res.state = !res.state;
        }
      });
      this.arr = arr;
      this.num = this.deal();
    },
    deal() {
      var num = 0;
      this.arr.forEach((res) => {
        if (res.state == false) {
          num += 1;
          console.log(num);
        }
      });
      return num;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
